<template>
  <n-config-provider
    :locale="zhCN"
    :date-locale="dateZhCN"
    :theme-overrides="themeOverrides"
  >
    <div
      id="app-main"
      style="width: 100vw; height: 100vh"
      @contextmenu.prevent=""
      @dragenter="$event.preventDefault()"
      @dragover="$event.preventDefault()"
      @drop="$event.preventDefault()"
      v-visibility-change="visibilityChange"
    >
      <div
        v-if="!sharedMiscState.isElectron"
        id="blur-container"
        class="blur-container"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          version="1.1"
          width="100%"
          height="100%"
          id="blurred_mkvvpnf50"
          class="blured-img"
          viewBox="0 0 1920 875"
          preserveAspectRatio="none"
        >
          <filter id="blur_mkvvpnf">
            <feGaussianBlur
              in="SourceGraphic"
              stdDeviation="50"
            ></feGaussianBlur>
          </filter>
          <image
            x="0"
            y="0"
            width="100%"
            height="100%"
            externalResourcesRequired="true"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xlink:href="https://static.wildfirechat.net/web_wfc_bg2.jpeg"
            style="filter: url(#blur_mkvvpnf)"
            preserveAspectRatio="none"
          ></image>
        </svg>
        <div class="blur-mask"></div>
      </div>
      <!--用来实现视频缩略图-->
      <div id="styled_video_container" class="styled_video_container">
        <video
          id="bgvid"
          playsinline
          autoplay
          muted
          loop
          crossorigin="anonymous"
        >
          <!-- <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
                <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4"> -->
        </video>
      </div>

      <CoolLightBox
        v-if="!sharedMiscState.isElectron"
        :items="sharedConversationState.previewMediaItems"
        :index="sharedConversationState.previewMediaIndex"
        :slideshow="false"
        @close="sharedConversationState.previewMediaIndex = null"
      >
      </CoolLightBox>
      <notifications v-if="sharedMiscState.isMainWindow" />
      <IpcMain
        v-if="sharedMiscState.isMainWindow && sharedMiscState.isElectron"
      />
      <router-view
        id="main-content-container"
        class="main-content-container"
      ></router-view>
    </div>
  </n-config-provider>
</template>

<script>
import store from './store'
import { isElectron } from './platform'
import CoolLightBox from './vendor/vue-cool-lightbox'
import './vendor/vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
import IpcMain from './ipc/ipcMain'
import { currentWindow } from './platform'
import wfc from './wfc/client/wfc'
import waterMark from './ui/util/waterMark'
import Config from './config'
import { zhCN, dateZhCN } from 'naive-ui'

export default {
  name: 'App',
  data() {
    return {
      url: '',
      sharedMiscState: store.state.misc,
      sharedConversationState: store.state.conversation,

      // Navie UI的主题色配置
      themeOverrides: {
        common: {
          primaryColor: '#4b67ff',
          primaryColorHover: '#3a50c7',
          primaryColorPressed: '#3a50c7',
          primaryColorSuppl: '#3a50c7',

          successColor: '#43CF7C',
          warningColor: '#feae32',
          errorColor: '#fd0100',
        },
      },
    }
  },
  methods: {
    visibilityChange(event, hidden) {
      store.setPageVisibility(!hidden)
      console.log('page visibilityChange', hidden)
      if (!hidden && !isElectron()) {
        wfc.onForeground()
      }
    },
    onblur() {
      store.setPageVisibility(false)
    },
    onfocus() {
      store.setPageVisibility(true)
    },
  },

  created() {
    let root = document.documentElement
    if (isElectron() || window.location.href.indexOf('voip') >= 0) {
      root.style.setProperty('--main-margin-left', '0px')
      root.style.setProperty('--main-margin-right', '0px')
      root.style.setProperty('--main-margin-top', '0px')
      root.style.setProperty('--main-margin-bottom', '0px')
      root.style.setProperty('--composite-message-page-width', '100vw')
      root.style.setProperty('--composite-message-page-height', '100vh')
    }

    if (this.sharedMiscState.isElectronWindowsOrLinux) {
      root.style.setProperty('--main-border-radius', '0px')
      root.style.setProperty('--home-menu-padding-top', '0px')
    }
    window.addEventListener('blur', this.onblur)
    window.addEventListener('focus', this.onfocus)

    if (isElectron()) {
      currentWindow.minimizable = this.sharedMiscState.enableMinimize
    }
  },

  mounted() {
    let href = window.location.href
    if (href.indexOf('voip') >= 0 || href.indexOf('files') >= 0) {
      let app = document.getElementById('app-main')
      let el
      el = document.getElementById('blur-container')
      el && app.removeChild(el)
      el = document.getElementById('styled_video_container')
      el && app.removeChild(el)
      // app.style.backgroundColor = 'red'
    }

    this.$eventBus.$on('uploadFile', (file) => {
      if (!file) {
        return
      }
      if (file.size > 100 * 1024 * 1024 && !wfc.isSupportBigFilesUpload()) {
        this.$notify({
          title: '大文件提示',
          text: ' 不支持大文件上传',
          type: 'warn',
        })
      }
    })

    if (Config.ENABLE_WATER_MARK) {
      waterMark.init()
    }
  },
  beforeUnmount() {
    this.$eventBus.$off('uploadFile')
    window.removeEventListener('blur', this.onblur)
    window.removeEventListener('focus', this.onfocus)

    if (Config.ENABLE_WATER_MARK) {
      waterMark.remove()
    }
  },

  components: {
    IpcMain,
    CoolLightBox,
  },
}
</script>

<style lang="scss">
@import '@/kang/style/index.scss';
</style>

<style lang="css">
:root {
  --main-border-radius: 10px;
  --main-margin-left: 80px;
  --main-margin-right: 80px;
  --main-margin-top: 50px;
  --main-margin-bottom: 50px;
  --tippy-right: 0px;
  --home-menu-padding-top: 60px;
  --composite-message-page-width: 100%;
  --composite-message-page-height: 100%;
}

.tippy-tooltip {
  right: var(--tippy-right) !important;
  border: 1px solid #f5f5f5 !important;
  background-color: #fcfcfc !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.125);
}

#app {
  position: relative;
}

.blur-container {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  z-index: -10;
  position: fixed;
  margin: 0;
}

.blur-container .blur-mask {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.styled_video_container {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  z-index: -999;
  background-size: cover;
  transition: 1s opacity;
  opacity: 0;
}

.main-content-container {
  /* z-index: 999;
  position: absolute;
  width: calc(100vw - var(--main-margin-left) - var(--main-margin-right));
  height: calc(100vh - var(--main-margin-top) - var(--main-margin-bottom));
  top: 0;
  left: 0;
  margin: var(--main-margin-top) var(--main-margin-right)
    var(--main-margin-bottom) var(--main-margin-left);
  display: flex;
  justify-content: center;
  align-items: center; */
}

.container-emoji {
  height: 300px;
}
</style>
